<template>
  <div class="app-container">
    <wise-crud
      ref="wise-crud"
      :urls="urls"
      :fields="fields"
      :handle="handle"
      :filters="filters"
    />
  </div>
</template>
<script>
import WiseCrud from '@/components/Crud/wiseCrud'
import { imgPath } from '../../../../filters'
export default {
  name: 'PatrolLogs',
  components: { WiseCrud },
  data() {
    return {
      urls: {
        list: '/api/v1/welder-sbtx-second/file-management-comb/list',
        add: '/api/v1/welder-sbtx-second/equipment-alarm/create',
        show: '/api/v1/welder-sbtx-second/file-management-comb/show/',
        update: '/api/v1/welder-sbtx-second/equipment-alarm/update/',
        delete: '/api/v1/welder-sbtx-second/file-management/remove/'
      },
      handle: [''],
      fields: [
        { label: '序号', type: 'index', use: ['table'] },
        {
          label: '标题',
          prop: 'title',
          type: 'text',
          labelWidth: '130px',
          rules: [{ required: true, message: '请输入标题', trigger: 'change' }],
          placeholder: '请输入标题',
          use: ['table', 'add', 'view', 'edit', 'search']
        },
        {
          label: '巡检状态',
          prop: 'fileState',
          type: 'radio',
          dataDic: 'EquipmentAlarmStatus',
          labelWidth: '130px',
          rules: [
            { required: true, message: '请选择设备状态', trigger: 'change' }
          ],
          placeholder: '请选择设备状态',
          use: ['table', 'add', 'view', 'edit', 'search']
        },
        {
          label: '巡检时间',
          prop: 'ct',
          type: 'datetime',
          format: 'YYYY-MM-DD HH:mm:ss',
          labelWidth: '130px',
          use: ['table', 'add', 'view', 'edit', 'search']
        },
        {
          label: '巡检人',
          prop: 'user.username',
          type: 'render',
          labelWidth: '130px',
          tableRender: (h, row, index) => {
            if (row.user) {
              return h('div', { style: { display: 'inline-flex' }}, [
                h(
                  'el-avatar',
                  {
                    props: {
                      src: imgPath(row.user.picture)
                    }
                  },
                  row.user.username
                ),
                h(
                  'div',
                  {
                    style: {
                      height: '40px',
                      lineHeight: '44px',
                      marginLeft: '10px'
                    }
                  },
                  row.user.username
                )
              ])
            } else {
              return h('div', '')
            }
          },
          viewRender: (h, item, object) => {
            if (object.user) {
              return h('div', { style: { display: 'inline-flex' }}, [
                h(
                  'el-avatar',
                  {
                    props: {
                      src: imgPath(object.user.picture)
                    }
                  },
                  object.user.username
                ),
                h(
                  'div',
                  {
                    style: {
                      height: '40px',
                      lineHeight: '44px',
                      marginLeft: '10px'
                    }
                  },
                  object.user.username
                )
              ])
            } else {
              return h('div', '')
            }
          },
          use: ['table', 'add', 'view', 'edit', 'search']
        },
        {
          label: '描述',
          prop: 'content',
          type: 'text',
          labelWidth: '130px',
          rules: [{ required: true, message: '请输入标题', trigger: 'change' }],
          placeholder: '请输入标题',
          use: ['view']
        },
        {
          label: '巡检文件',
          prop: 'file',
          type: 'render',
          labelWidth: '130px',
          uploadType: 'image',
          viewRender: (h, item, object) => {
            if (object.file) {
              if (object.fileType === 1) {
                let imgs = []
                object.file.split(';').forEach((item) => {
                 
                  imgs.push(
                    h('el-image', {
                      style: {
                        width: '200px',
                        height: '200px'
                      },
                      props: {
                        src: imgPath(item),
                        previewSrcList: object.file
                          .split(';')
                          .map((item) => imgPath(item)),
                        fit: 'cover'
                      }
                    })
                  )
                })
                return h('div', imgs)
              } else if (object.fileType === 2) {
                return h('video', {
                  style: {
                    width: '200px'
                  },
                  attrs: {
                    src: imgPath(object.file ? object.file : ''),
                    controls: 'controls'
                  }
                })
              } else {
                return h('audio', {
                  attrs: {
                    src: imgPath(object.file ? object.file : ''),
                    controls: 'controls'
                  }
                })
              }
            } else {
              return h('div')
            }
          },
          use: ['view']
        },
        {
          label: '操作',
          type: 'handle',
          use: ['table'],
          handle: ['view', 'delete'],
          tableWidth: 200
        }
      ]
    }
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId
    },
    filters() {
      return [
        {
          field: 'spaceId',
          operator: 'EQUALS',
          value: this.$store.state.project.spaceId
        }
      ]
    }
  },
  methods: {
    cleanAlarm(item) {
      this.$confirm('您确定要执行此操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }
  }
}
</script>

<style>
</style>
